<template>
    <div class="table">
        <div class="table-title" v-if="title">{{ title }}</div>
        <div class="table-tips" v-if="tips">{{ tips }}</div>
        <div class="table-content" v-if="Array.isArray(list) && list.length">
            <el-table :data="list" border style="width: 100%" tooltip-effect="dark">
                <slot></slot>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    name: 'common-table',
    props: {
        title: {
            type: String
        },
        tips: {
            type: String
        },
        list: {
            type: Array
        }
    },
    methods: {}
};
</script>
<style scoped lang="less">
.table {
    max-width: 716px;
    &-title {
        margin: 30px 0px 8px;
        font-size: 20px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #000000;
    }
    &-tips {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #323232;
        line-height: 16px;
        margin-bottom: 30px;
    }
    &-content {
        /deep/ .has-gutter {
            tr {
                th {
                    font-size: 12px;
                    color: #323232;
                    background: #f4f4f4;
                    border-radius: 0px 0px 0px 0px;
                    opacity: 1;
                    text-align: center;
                    height: 55px;
                    font-weight: 400;
                    font-weight: 600;
                }
            }
        }

        /deep/ .el-input__inner {
            font-size: 14px;
        }
    }
}
</style>
